<template>
    <div class="w-full h-full p-6">
        <h1 class="text-4xl font-bold mb-4">Rec</h1>
      <div>
        <el-button @click="()=>{audios.setAudioPlayList(recList)}">播放歌单</el-button>
      </div>
        <div v-if="listData">
            <el-table :data="listData" max-height="400" class="w-full">
                <el-table-column label="歌曲">
                    <template #default="scope">
                        <div class="flex items-center hover:cursor-pointer">
                            <div class="flex flex-1" @click="handleTrackClick(scope.row, scope.$index)">
                                <el-avatar :src="scope.row.song_pic" alt="" class="mr-2" />
                                <div class="mt-2">{{ scope.row.song_name }}</div>
                            </div>
                            <div class="flex-none">
                                <el-icon @click="() => { addPlayList(scope.row, scope.$index) }"
                                    class=" hover:cursor-context-menu">
                                    <Star />
                                </el-icon>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import {ref} from 'vue'
import {addToPlaylist, getMusicUrl, getRecSongs} from '../boot/requests'
import {player as playerRef, useAudioPlayListStore} from '@/stores/counter';
import {ElMessage} from 'element-plus';

const audios = useAudioPlayListStore();
const user_id = ref(localStorage.getItem('userId'));
const listData = ref([]);
const player = ref('audioPlayer')
const recList = ref([])
const getMyPlaylist = async (user_id) => {
    try {
        const res = await getRecSongs(user_id);
        const data = res.data;

        if (data.code === 200) {
            listData.value = data.data;
            // console.log(listData.value);
            console.log(listData.value, "================>")
            const promises = listData.value.map(async (item) => {
                const song_id = item.song_id;
                const urlRes = await getMusicUrl(song_id);
                const song_url = urlRes.data.code === 200 ? urlRes.data.data[0].url : null;
                console.log(song_url)
                return {
                    name: item.song_name,
                    url: song_url,
                };
            });

          recList.value = await Promise.all(promises)
            // audios.setAudioPlayList(playlist);
        }
    } catch (error) {
        console.error('Error fetching playlist or music URLs:', error);
    }
};


function handleTrackClick(row, index) {
    playerRef.value.currentPlayIndex = index
    if (playerRef.value.isPlaying) {
        playerRef.value.pause()
    }
    playerRef.value.play()
    setTimeout(() => {
        playerRef.value.play()
    }, 1000)
}

const addPlayList = (row, index) => {
    // let song_id = details.value[index].id
    let song_id = row.song_id
    getMusicUrl(song_id).then(res => {
        let data = res.data
        if (data.code === 200) {
            var url = data.data[0].url
        }
        let payload = {
            user_id: user_id.value,
            song_id: song_id,
            song_name: row.song_name,
            song_pic: row.song_pic,
            song_url: url
        }
        addToPlaylist(payload).then(res => {
            let data = res.data
            if (data.code === 200) {
                ElMessage.success('添加成功')
            }
            else {
                ElMessage.error("你已经添加过了")
            }
        })

    })

}

getMyPlaylist(localStorage.getItem('userId'));
</script>
<style scoped></style>
